import Configer from "../../../script/frame/apiModel/config/Configer";
import {ThreeChooseOneModel} from "../model/GuiModel";
import {UIConfigKey} from "../../../script/constant/UIConfig";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import * as React from "../../../script/frame/apiModel/gui/React";
import {UISyncData, SyncId, View} from "../../../script/frame/apiModel/gui/React";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import ThreeChooseOneRoot from "../component/ThreeChooseOneRoot";
import GoodsInfoPage from "./GoodsInfoPage";
import {Logger} from "../../../script/frame/apiModel/config/Logger";
import {ResourceKey} from "../../../script/constant/ResourceConstant";

export default class ThreeChooseOneGoodBar extends ThreeChooseOneRoot {

    getContentStyle = () => {
        const backSize = { h: 0.05, w: 0.32 };
        const backPos = { x: 0.3, y: 0.4 }
        return { width: backSize.w, height: backSize.h, top: backPos.y, left: backPos.x }
    }

    getInfoPage = () => {
        return <GoodsInfoPage   key={GuiKeys.threeChooseOneGoodBarInfoPage} goodsInfo={{ id: this.state.infoId, lv: 0 }} x={this.state.x} y={this.state.y} hidden={!this.state.infoVisible} ></GoodsInfoPage>
    }

    createElement = (model: ThreeChooseOneModel, index: number) => {
        const backSize = { h: 0.05, w: 0.32 };
        const itemSize = { h: backSize.h, w: 0.05 }
        const backgroundImage = model?.Art ? model?.Art : '';

        let backlit = '';
        if (this.state.selectIndex === index) {
            backlit = Configer.getResource(ResourceKey.chooseTalentBacklit)
        }

        return <View   onMouseDown={() => { return this.chooseItem(model?.id) }} onMouseEnter={(event) => { this.showInfoPage(event.x + itemSize.w, event.y, model.id, index) }} onMouseLeave={this.closeInfoPage} key={`${GuiKeys.threeChooseOneGoodBarItem}|${index}`} style={{ backgroundImage: backgroundImage, width: itemSize.w, height: itemSize.h, border: backlit, borderWeight: 0.01, paddingL: 0.0125, marginL: 0.02 }}>
        </View>
    }

    chooseItem = (id: string) => {
        // this.toNextTask();
        const syncData: UISyncData = { id: SyncId.chooseItem, param: { itemId: id, ownerId: this.state.currentOwnerId } }
        return syncData
    }

    showInfoPage = (x: number, y: number, infoId: string, index: number) => {
        this.onSelect(index);
        this.setState({
            ...this.state,
            x,
            y,
            infoId,
            infoVisible: true,
            selectIndex: index,
        })
    }

    closeInfoPage = () => {
        this.onSelect(-1);
        this.setState({
            ...this.state,
            infoVisible: false,
        })
    }

}